<template>
  <div class="recommend" ref='recommend'>
    <scroll class='recommend-content' ref='recommendContent' :data='discList'>
      <div>
        <div class='slider-wrapper'>
          <div
            v-if='recommends.length'
            class='slider-content'
          >
            <Slider>
              <div
                v-for="(item,index) in recommends"
                :key="index"
              >
                <a href='https://www.baidu.com'>
                  <img :src='item.imageUrl'>
                </a>
              </div>
            </Slider>
          </div>
        </div>
        <div class='recommend-list'>
          <h1 class='list-title'>热门歌单推荐</h1>
          <ul>
            <li
              @click='selectItem(item)'
              class='item'
              v-for='(item,index) in discList'
            >
              <div class='icon'>
                <img
                  width='60'
                  height='60'
                  v-lazy='item.picUrl'
                  alt=''
                >
              </div>
              <div class='text'>
<!--
                <h2 class='name'>{{item.copywriter}}</h2>
-->
                <p class='desc'>{{item.name}}</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div
        v-show='!this.discList.length'
        class='loading-container'
      >
        <loading></loading>
      </div>
    </scroll>
    <router-view></router-view>
  </div>
</template>

<script>
  import { getRecommend, personalized } from 'api'
  import {getDoctor} from 'api/doctor'
  import Slider from 'base/slider/slider'
  import Scroll from 'base/scroll/scroll'
  import Loading from 'base/loading/loading'
  import { playlistMixin } from 'common/js/mixin'
  import { mapMutations } from 'vuex'

  export default {
    mixins: [playlistMixin],
    components: {
      Slider,
      Scroll,
      Loading
    },
    data() {
      return {
        recommends: [],
        discList: []
      }
    },
    props: {},
    watch: {},
    methods: {
      selectItem(item) {
        this.$router.push({
          path: `/recommend/${item.id}`
        })
        this.setDisc(item)
      },
      handlePlaylist(newVal) {
        const bottom = newVal.length > 0 ? '60px' : '0'
        this.$refs.recommend.style.bottom = bottom
        this.$refs.recommendContent.refresh()
      },
      _getRecommend() {
        getRecommend().then((res) => {
          this.recommends = res.data.banners
        })
      },
      _getDiscList() {
        personalized().then((res) => {
          this.discList = res.data.result
        })
      },
      ...mapMutations(
        {
          setDisc:'SET_DISC'
        }
      )
    },
    computed: {},
    created() {
      this._getRecommend()
      this._getDiscList()
    },
    mounted() {
      let params = {
        rp:30,
        page:1
      }
      getDoctor(params)
    },
    destroyed() {
    }
  }
</script>

<style
  lang="stylus"
  scoped
>
  @import "~common/stylus/variable"

  .recommend
    position: fixed
    width: 100%
    top: 88px
    bottom: 0
    .recommend-content
      height 100%
      overflow: hidden
      .slider-wrapper
        position relative
        width: 100%
        height: 0
        padding-top: 37%
        overflow hidden
        .slider-content
          position: absolute
          top: 0
          left: 0
          width: 100%
          height: 100%
      .recommend-list
        .list-title
          height 65px
          line-height 65px
          text-align center
          font-size $font-size-medium
          color $color-theme
        .item
          /*display flex*/
          display inline-block
          vertical-align top
          box-sizing border-box
          align-items center
          border solid 4px rgba(0, 0, 0, 0)
          width 33.3%
          .icon
            width 100%
            height 0px
            padding-top 100%
            position relative
            border-radius 4px
            overflow hidden
            img[lazy=loaded]
              animation: fade 0.8s
            img
              position absolute
              top: 0
              width 100%
              height 100%
              transition: all 0.8s
            @keyframes fade
              0%
                opacity: 0;
              100%
                opacity: 1;
          .text
            /*display flex*/
            /*flex-direction column*/
            /*作用在主轴上 column 作用是上下*/
            /*justify-content center*/
            /*flex 1*/
            line-height 20px
            overflow hidden
            font-size $font-szie-medium
            .name
              margin-bottom 10px
              color $color-text
            .desc
              font-size $font-size-small
              /*color $color-text-d*/
              color $color-text
              line-height 20px
              height 40px
              overflow: hidden;
              text-overflow: ellipsis;
              word-break: break-all
              white-space: pre-wrap
              -webkit-line-clamp: 2
              -webkit-box-orient: vertical

    .loading-container
      position absolute
      width 100%
      top 50%
      transform translateY(-50%)
</style>
